<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.9.1.min.js"></script>
		<script src="../../components/echarts-4.0.4.min.js"></script>
    <script src="http://echarts.baidu.com/examples/vendors/echarts/extension/dataTool.js?_v_=1519819816100"></script>
		<style>
			html,body{
				width: 100%;
				height: 100%;
			}
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
    <div id="main" style="height:100%;width:100%;"></div>
		
	</body>
	<script>
        var myChart = echarts.init(document.getElementById('main'));
        var data = [
            {value:10, name:'电子信息技术'},
            {value:5, name:'生物与新医药技术'},
            {value:15, name:'新材料技术'},
            {value:25, name:'高技术服务业'},
            {value:20, name:'资源与环境技术'},
            {value:11, name:'新能源及节能技术'},
            {value:8, name:'航空航天技术'},
            {value:35, name:'高新技术改造传统产业'}
        ];
		option = {
		    title: {  
                text: '2013年全国技术交易领域分布',
                x: 'center',
                y:'20%',
                textStyle:{color:'#FFF',fontSize: 22}
           },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    grid: {
		        containLabel: true
		    },
		    color: ['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293','#67c47b'],
		    legend: {
		    	show:false,
		        x : '5%',
		        y : '35%',
		        orient:'vertical',
		        data:['电子信息技术','生物与新医药技术','新材料技术','高技术服务业','资源与环境技术','新能源及节能技术','航空航天技术','高新技术改造传统产业'],
		        textStyle:{color:'#FFF',fontSize: 16}
		    },
            backgroundColor: '#0A0F23',
		    calculable : true,
		    series : [
		        {
		            name:'面积模式',
		            type:'pie',
		            radius: "80",
		            center:['50%','65%'],
		            roseType : 'area',
		            label:{color:'#FFF',fontSize: 16},
		            data:data
		        }
		    ]
		};
		myChart.setOption(option);
        var i = 1;
        setInterval(function(){
        	if(option){
        		var year = (i%5+2013)+"年全国技术交易领域分布";
        		option.title.text = year;
        		for(var k = 0; k<data.length; k++){
        			data[k].value = Math.round(Math.random() * 20);
        		}
        		option.series[0].data = data;
        		myChart.setOption(option);
        		i++;
        	}
        }, 2000);
		</script>
</html>
